<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="../common_styles/oobe_dialog_host_styles.html">

<!--
  Simple OOBE polymer element which is used for displaying single slide in a
  carousel.

  Example:
    <oobe-slide is-warning>
      <img ... slot="slide-img">
      <div slot="title">...</div>
      <div slot="text">...</div>
    </oobe-slide>

    Attributes:
      is-warning - changes title slot color from blue to red.
-->
<dom-module id="oobe-slide">
  <template>
    <style include="oobe-dialog-host-styles">
      :host {
        --oobe-slide-img-size: 200px;
        --oobe-slide-vertical-margin: 24px;
        --oobe-slide-horizontal-margin: 32px;
      }

      #slide-container {
        display: flex;
      }

      #slide-container {
        align-items: center;
        flex-direction: column;
        justify-content: start;
      }

      #illustration-container {
        height: var(--oobe-slide-img-size);
        width: var(--oobe-slide-img-size);
      }

      #context-container {
        align-items: center;
        flex-direction: column;
        justify-content: start;
        margin-bottom: 32px; /* for navigation bar */
      }

      #slide-title {
        padding-top: 8px;
      }

      #slide-title ::slotted(*) {
        color: var(--google-blue-600);
        font-family: var(--oobe-header-font-family);
        font-size: 22px;
        font-weight: 500; /* medium */
        line-height: 28px;
      }

      #slide-title[is-warning] ::slotted(*) {
        color: var(--google-red-600);
      }

      #slide-text {
        padding-top: 8px;
      }

      #slide-text ::slotted(*) {
        color: var(--google-grey-700);
        font-family: var(--oobe-default-font-family);
        font-size: 14px;
        font-weight: 400; /* regular */
        line-height: 20px;
      }

      #context-container ::slotted(*) {
        padding-inline-end: 20px;
        padding-inline-start: 20px;
        text-align: center;
      }

      .multiline {
        white-space: normal;
      }
    </style>
    <div id="slide-container" class="flex layout">
      <div id="illustration-container" class="oobe-illustration">
        <slot name="slide-img"></slot>
      </div>
      <div id="context-container" class="flex layout vertical">
        <div id="slide-title" is-warning$="[[isWarning]]">
          <slot name="title" class="multiline"></slot>
        </div>
        <div id="slide-text">
          <slot name="text" class="multiline"></slot>
        </div>
      </div>
    </div>
  </template>
  <script src="oobe_slide.js"></script>
</dom-module>
